<template>
  <!-- 报名活动页面 -->
  <view>
    <NoData v-if="signList.length === 0" :msg="msg" />
    <view v-else>
      <view class="signup" v-for="sign in signList" :key="sign.id" @click="toDetail(sign.id)">
        <view class="signup-box">
          <view class="title">
            <text>{{ sign.name }}</text>
          </view>
          <view class="Simg">
            <image :src="sign.poster" mode="widthFix" />
          </view>
          <view class="detail">
            <view class="detail-com">
              <view class="detail-organ">
                <image :src="comImg" mode="widthFix" class="comImg" />
                <text class="organizer-text">{{ sign.company }}</text>
              </view>
              <view>
                <text class="pnum-text">{{ sign.scale }}人</text>
              </view>
            </view>
            <view class="detail-bot">
              <view class="bot">
                <text class="bot-text">报名中</text>
              </view>
              <view class="bot-time">
                <image :src="timeImg" mode="widthFix" class="timeImg" />
                <text class="time-text">{{ formatDate(sign.end_time) }}</text>
              </view>
            </view>
          </view>
          <view class="sig"></view>
        </view>
        <view class="sig"></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { SignupItem } from '@/types/index/home'
import { getSignupListAPI } from '@/services/index/home'
import NoData from '@/components/NoData/NoData.vue'

const msg = ref('暂无活动')
const comImg = ref('/static/images/company.png')
const timeImg = ref('/static/images/detail_time.png')
const signList = ref<SignupItem[]>([])

// 获取报名列表数据
const getSignupItemData = async () => {
  try {
    const { data } = await getSignupListAPI()
    signList.value = data.result
  } catch (error) {
    console.error('Failed to fetch signup list:', error)
  }
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}/${month}/${day}`
}

// 跳转到详情页
const toDetail = (id: string) => {
  uni.navigateTo({ url: `detail/index?id=${id}` })
  console.log(`Clicked ID: ${id}`)
}

// 组件挂载时获取数据
onMounted(() => {
  getSignupItemData()
})
</script>

<style scoped>
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Alibaba PuHuiTi;
  font-weight: 800;
  font-size: 32rpx;
  color: #221815;
  line-height: 67rpx;
}

.signup {
  margin-bottom: 30rpx;
}

.signup .Simg image {
  border-radius: 9%;
  margin-top: 4%;
}

.sig {
  width: 80%;
  height: 2rpx;
  background-color: #dcdcdc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  margin: 20rpx auto;
}

.detail-com {
  display: flex;
  justify-content: space-between;
}

.pnum-text {
  width: 572rpx;
  font-family: FandolHei;
  font-weight: 400;
  font-size: 28rpx;
  color: #221815;
  line-height: 58rpx;
}

.comImg {
  width: 34rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.timeImg {
  width: 27rpx;
  height: 27rpx;
}

.organizer {
  display: flex;
  align-items: center;
}

.organizer-text {
  width: 572rpx;
  font-family: FandolHei;
  font-weight: 400;
  font-size: 28rpx;
  color: #221815;
  line-height: 58rpx;
}

.detail-bot {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.bot {
  width: 22%;
  border-radius: 15%;
  background-color: #ec7496;
}

.bot-text {
  width: 80rpx;
  height: 26rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 800;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 58rpx;
  margin-left: 15%;
}

.time-text {
  width: 118rpx;
  height: 22rpx;
  font-family: FZHei-B01S;
  font-weight: 400;
  font-size: 28rpx;
  color: #221815;
  line-height: 58rpx;
}

.bot-time {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 4%;
}

.timeImg {
  width: 27rpx;
  height: 27rpx;
  margin-right: 8rpx;
}

.time-text {
  font-family: FZHei-B01S;
  font-weight: 400;
  font-size: 28rpx;
  color: #221815;
  line-height: 22rpx;
}
</style>
